<template>
	<div>
		
		<van-popup
		  v-model="showReason"
		  position="bottom"
		  :style="{ height: '50%' }"
		>
		  <div class="reason_title">退款原因</div>
		  <div class="reason">
		  	<div class="reason_item">
		  		<div>拍错/错拍/不想要</div>
		  		<div><van-radio name="拍错/错拍/不想要" checked-color="#ff6000" v-model="reason"></van-radio></div>
		  	</div>
		  	<div class="reason_item">
		  		<div>协商一直退款</div>
		  		<div><van-radio name="协商一直退款" checked-color="#ff6000" v-model="reason"></van-radio></div>
		  	</div>	
		  	<div class="reason_item">
		  		<div>缺货</div>
		  		<div><van-radio name="缺货" checked-color="#ff6000" v-model="reason"></van-radio></div>
		  	</div>
		  	<div class="reason_item">
		  		<div>未按规定时间发货</div>
		  		<div><van-radio name="未按规定时间发货" checked-color="#ff6000" v-model="reason"></van-radio></div>
		  	</div>
		  	<div class="reason_item">
		  		<div>其他</div>
		  		<div><van-radio name="其他" checked-color="#ff6000" v-model="reason"></van-radio></div>
		  	</div>		  	
		  </div>
		</van-popup>
	    <div class="c">
	    	<div class="c_item">
	    		<div class="c_1">
	    			<span class="c_3">退款原因</span>
	    			<span class="c_4">必填</span>
	    		</div>
	    		<div class="c_2" @click="popup">
	    			请选择
	    			<van-icon name="arrow" class="icon"/>
	    		</div>
	    	</div>
	    	<div class="c_item">
	    		<div class="c_1">
	    			<span class="c_3">退款金额</span>
	    			<span class="c_5">&yen;1.00</span>
	    		</div>
	    	</div>	
	    	<div class="c_item">
	    		<div class="c_6">
	    			不可修改，最多&yen;1.00元，含发货邮费&yen;0.00元
	    		</div>
	    	</div>	
	    	<div class="c_item" style="margin-bottom: 0;">				
				  <van-field
				    v-model="message"
				    rows="2"
				    autosize
				    type="textarea"
				    maxlength="50"
				    placeholder="请输入退款说明，最多50个字"
				    show-word-limit				    
				  >
				  <span slot="label" style="font-size: 15px;font-weight: bold">退款说明</span>
				  </van-field>	    		
	    	</div>	    	
	    </div>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
         message:'',
         showReason:false,
         reason:''
       }
	},
	methods: {	
      popup(){
      	this.showReason=true
      }
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="">
.c{padding:10px;background: #fff;margin-bottom: 10px;}
.c_item{display: flex;justify-content: space-between;margin-bottom: 20px;}
.c_1{align-items: center;display: flex;}
.c_3{font-size: 16px;font-weight: 600;}
.c_4{margin-left: 15px;color: #aaa;}
.icon{vertical-align: -2px;}
.c_2{color: #aaa;font-size: 14px;}
.c_5{margin-left: 15px;color: #ff6000;font-size: 14px;}
.c_6{color: #aaa;}
.van-cell{padding: 0;}
.reason_title{text-align: center;padding: 25px 0;font-size: 20px;}
.reason{padding: 0 10px;}
.reason_item{padding-bottom: 10px;display: flex;justify-content: space-between;
border-bottom:1px solid #eee;font-size: 14px;margin-bottom: 10px;}
.reason_item:nth-last-child(1){border:none}
</style>